<template>
  <ul class="nav">
    <li v-for="(item, index) in nav" :key="index">
      <a href="" :class="{active: isActive == index}" @click.prevent="clickNav(index, item)">
        {{item.name}}
      </a>
    </li>
  </ul>
</template>

<script>
  export default {
    name: 'topics-nav',
    data() {
      return {
        nav: [
          {
            'name':'全部',
            'field':'all',
          },
          {
            'name':'热门',
            'field':'hot',
          },
          {
            'name':'最新',
            'field':'news',
          },
          {
            'name':'精华',
            'field':'digest',
          },
        ],
        isActive: 0,
        currentTag: 'all'
      }
    },
    methods: {
      clickNav(index, item) {
        if(this.currentTag === item.field) return
        // 改变样式
        this.isActive = index
        this.currentTag = item.field
        // 请求数据
        this.$emit('getTopicByTag', 'tag')
      }
    },
  }
</script>

<style scoped>
  /* 导航栏 */
  .nav{
    height: 40px;
  }
  .nav li{
    height: 40px;
    float: left;
    display: flex;
    align-items: center;
    margin-right: 20px;
  }
  .nav li a{
    padding: 3px 4px 3px 4px;
    line-height: 1;
    border-radius: 4px;
  }
  .nav li a:not(.active){
    color: #71777c;
  }
  .nav li a:not(.active):hover{
    color: #80bd01;
  }
  .active{
    /*background: #80bd01;*/
    color: #80bd01;
  }
</style>
